<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Position - UIkit tests</title>
        <script src="../node_modules/jquery/dist/jquery.js"></script>
        <script src="js/test.js"></script>
        <style>

            .uk-overlay { background: rgba(255,255,255,0.8); }

            /* JavaScript */
            #boundary {
                height: 300px;
                outline: 1px solid rgba(0,0,0,0.1);
                position: relative;
            }

            #target {
                position: absolute;
                left: 0;
                top: 0;
                width: 200px;
                height: 100px;
                background: rgba(0,0,0,0.1);
            }

            #element {
                position: absolute;
                display: none;
                width: 75px;
                height: 75px;
                background: rgba(0,0,0,0.1);
            }

        </style>
    </head>

    <body>

        <div class="uk-container">

            <h1>Position</h1>

            <div class="uk-child-width-1-2@s" uk-grid>
                <div>

                    <div class="uk-inline">
                        <a class="uk-display-block" href="#"><img src="images/photo.jpg" alt=""></a>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-top-left">Top Left</div>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-top-center">Top Center</div>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-top-right">Top Right</div>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-center-left">Center Left</div>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-center">Center Center</div>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-center-right">Center Right</div>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-bottom-left">Bottom Left</div>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-bottom-center">Bottom Center</div>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-bottom-right">Bottom Right</div>
                    </div>

                </div>
                <div>

                    <div class="uk-inline">
                        <a class="uk-display-block" href="#"><img src="images/photo.jpg" alt=""></a>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-top uk-text-center">Top</div>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-bottom uk-text-center">Bottom</div>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-left uk-flex uk-flex-middle">Left</div>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-right uk-flex uk-flex-middle">Right</div>
                    </div>

                </div>
            </div>

            <h2>Small</h2>

            <div class="uk-child-width-1-2@s" uk-grid>
                <div>

                    <div class="uk-inline">
                        <a class="uk-display-block" href="#"><img src="images/photo.jpg" alt=""></a>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-top-left">Top Left</div>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-top-center">Top Center</div>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-top-right">Top Right</div>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-center-left">Center Left</div>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-center">Center Center</div>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-center-right">Center Right</div>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-bottom-left">Bottom Left</div>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-bottom-center">Bottom Center</div>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-bottom-right">Bottom Right</div>
                    </div>

                </div>
                <div>

                    <div class="uk-inline">
                        <a class="uk-display-block" href="#"><img src="images/photo.jpg" alt=""></a>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-top uk-text-center">Top</div>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-bottom uk-text-center">Bottom</div>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-left uk-flex uk-flex-middle">Left</div>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-right uk-flex uk-flex-middle">Right</div>
                    </div>

                </div>
            </div>

            <h2>Medium</h2>

            <div class="uk-child-width-1-2@s" uk-grid>
                <div>

                    <div class="uk-inline">
                        <a class="uk-display-block" href="#"><img src="images/photo.jpg" alt=""></a>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-top-left">Top Left</div>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-top-center">Top Center</div>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-top-right">Top Right</div>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-center-left">Center Left</div>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-center">Center Center</div>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-center-right">Center Right</div>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-bottom-left">Bottom Left</div>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-bottom-center">Bottom Center</div>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-bottom-right">Bottom Right</div>
                    </div>

                </div>
                <div>

                    <div class="uk-inline">
                        <a class="uk-display-block" href="#"><img src="images/photo.jpg" alt=""></a>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-top uk-text-center">Top</div>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-bottom uk-text-center">Bottom</div>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-left uk-flex uk-flex-middle">Left</div>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-right uk-flex uk-flex-middle">Right</div>
                    </div>

                </div>
            </div>

            <h2>Cover</h2>

            <div class="uk-child-width-1-3@s" uk-grid>
                <div>

                    <div class="uk-inline">
                        <a class="uk-display-block" href="#"><img src="images/photo.jpg" alt=""></a>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-cover uk-flex uk-flex-center uk-flex-middle">Cover</div>
                    </div>

                </div>
                <div>

                    <div class="uk-inline">
                        <a class="uk-display-block" href="#"><img src="images/photo.jpg" alt=""></a>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-cover uk-flex uk-flex-center uk-flex-middle">Cover</div>
                    </div>

                </div>
                <div>

                    <div class="uk-inline">
                        <a class="uk-display-block" href="#"><img src="images/photo.jpg" alt=""></a>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-cover uk-flex uk-flex-center uk-flex-middle">Cover</div>
                    </div>

                </div>
            </div>

            <h2>JavaScript</h2>

            <div id="boundary" class="uk-margin">
                <div id="target" class="uk-flex uk-flex-center uk-flex-middle" draggable="true">Drag me!</div>
            </div>

            <div id="element"></div>

            <div class="uk-grid uk-child-width-auto uk-form-stacked">
                <div>

                    <div class="uk-margin">
                        <span class="uk-form-label">Element</span>
                        <label>
                            Horizontal
                            <select id="element_x" class="uk-select uk-form-small uk-form-width-xsmall">
                                <option value="left">left</option>
                                <option value="center">center</option>
                                <option value="right">right</option>
                            </select>
                        </label>
                        <label>
                            Vertical
                            <select id="element_y" class="uk-select uk-form-small uk-form-width-xsmall">
                                <option value="top">top</option>
                                <option value="center">center</option>
                                <option value="bottom">bottom</option>
                            </select>
                        </label>
                    </div>

                    <div class="uk-margin">
                        <span class="uk-form-label">Target</span>
                        <label>
                            Horizontal
                            <select id="target_x" class="uk-select uk-form-small uk-form-width-xsmall">
                                <option value="left">left</option>
                                <option value="center">center</option>
                                <option value="right">right</option>
                            </select>
                        </label>
                        <label>
                            Vertical
                            <select id="target_y" class="uk-select uk-form-small uk-form-width-xsmall">
                                <option value="top">top</option>
                                <option value="center">center</option>
                                <option value="bottom">bottom</option>
                            </select>
                        </label>
                    </div>

                </div>
                <div>

                    <div class="uk-margin">
                        <span class="uk-form-label">Offset</span>
                        <label>
                            Horizontal
                            <input id="offset_x" class="uk-input uk-form-small uk-form-width-xsmall" type="text">
                        </label>
                        <label>
                            Vertical
                            <input id="offset_y" class="uk-input uk-form-small uk-form-width-xsmall" type="text">
                        </label>
                    </div>

                    <div class="uk-margin">
                        <span class="uk-form-label">Flip</span>
                        <label>
                            Horizontal
                            <select id="flip_x" class="uk-select uk-form-small uk-form-width-xsmall">
                                <option value="x">flip</option>
                                <option value="">none</option>
                            </select>
                        </label>
                        <label>
                            Vertical
                            <select id="flip_y" class="uk-select uk-form-small uk-form-width-xsmall">
                                <option value="y">flip</option>
                                <option value="">none</option>
                            </select>
                        </label>
                    </div>

                </div>
            </div>

        </div>

        <script>

            (function ($) {

                var ticking, boundary = $('#boundary'), target = $('#target'), offsetX, offsetY;

                function position() {
                    UIkit.util.position(
                        '#element',
                        target,
                        $('#element_x').val() + ' ' + $('#element_y').val(),
                        $('#target_x').val() + ' ' + $('#target_y').val(),
                        $('#offset_x').val() + ' ' + $('#offset_y').val(),
                        null,
                        $('#flip_x').val() + $('#flip_y').val(),
                        boundary
                    );
                }

                $(window).on('dragstart', function (e) {
                    e.originalEvent.dataTransfer.setDragImage(new Image(), 0, 0);

                    offsetX = Math.round(e.pageX - target.offset().left);
                    offsetY = Math.round(e.pageY - target.offset().top);

                }).on('dragover', function (e) {

                    e.preventDefault();

                    if (!ticking) {
                        requestAnimationFrame(function () {
                            UIkit.util.position(
                                target,
                                boundary,
                                'left top',
                                'left top',
                                (e.pageX - boundary.offset().left - offsetX) + ' ' + (e.pageY - boundary.offset().top - offsetY)
                            );

                            position();

                            ticking = false;
                        });
                        ticking = true;
                    }

                    return true;
                });

                $('select,input').bind('change', position);

                $('#element').show();
                position();

            })(jQuery);

        </script>

    </body>
</html>
